<template>
	<div class="index">
		<div class="template" v-show="Loading">
			<div>
				<mt-spinner :type="3" :size="60"></mt-spinner>
			</div>
		</div>

		<header class="aui-header">
			<div></div>
			<div class="aui-title">首页</div>
			<img src="../assets/navgation.png" class="navigation" @click="navigation">
		</header>
		<div class="navigation_d" v-show="isShow">
			<div @click="home">首页</div>
			<div @click="my">我的</div>
			<div @click="seek">搜索</div>
			<div @click="news">消息</div>
		</div>
		<div class="bannerfig">
			<mt-swipe :auto="4000">
				<mt-swipe-item v-for="(item,index) in bannerList" class="bannerpic">
					<img :src="item.img" @click="nav(item.id,item.value,index,item.linkType)">
				</mt-swipe-item>
			</mt-swipe>
		</div>
		<!--标题栏-->
		<div class="titlebar">
			<div class="toaltitle">
				<div class="sametitle" v-for="item in modeList" @click="modelbut(item.name,item.value)">
					<div class="sametitleimg"><img :src="item.img"></div>
					<p class="sametitlename">{{item.name}}</p>
				</div>
			</div>
		</div>
		<!--特卖-->
		<div class="activityTitle">
			<div><img src="../assets/images1/aramimg.png">整点特卖</div>
			<div @click="specialgoods">下一场 > </div>
		</div>

		<div class="special">
			<div class="specialList" v-for='item in special' @click='jd(item.id,item.couponMoney)'>
				<div class="specialImg"><img :src="item.mainImageUrl"></div>
				<div class="specialName">{{item.goodsName}}</div>
				<div class="specialPrice">
					<div>￥{{item.price}}</div>
					<div>￥{{item.conPrice}}</div>
				</div>
			</div>
		</div>
		<div class="examine" @click="specialgoods">查看全部特卖 > </div>

		<!--广告位1-->
		<div v-if='len !=0'>
			<div class="sechandbanner" v-if="len == 1"><img :src="advertOne"></div>
			<div class="sechandbanner" v-else>
				<mt-swipe :auto="4000">
					<mt-swipe-item v-for="item in sechandList" class="bannerpic">
						<img :src="item.img">
					</mt-swipe-item>
				</mt-swipe>
			</div>
		</div>
		<div class="findgood"><img src="../assets/findgood.jpg"></div>
		<div class="explosmain">
			<div class="samexplost" v-for="item in findGood" @click="find(item.id,item.value,item.linkType)">
				<img :src="item.img">
			</div>
		</div>
		<!--<div class="findgood"><img src="../assets/acrivepic.jpg"></div>-->
		<!--<div class="activemain">
			<div class="sameactive" v-for="item in actList" @click="activity(item.id,item.value)">
				<img :src="item.img">
			</div>
		</div>-->
		<div class="findgood"><img src="../assets/jingxuan.png"></div>
		<div class="sift">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<li v-for='item in sift' v-if="item.spuPlatform == 'pdd'" @click="pdd(item.id)">
					<img :src="item.mainImageUrl">
					<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
					<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
					<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
					<div class="introduce">{{item.goodsName}}</div>
					<span class="jin"><img src='../assets/jingxaun.png'></span>
					<div class="price">
						<span>￥{{item.price}}</span>/
						<span>降{{item.couponMoney}}元</span>
					</div>
					<div class="rush">
						<span>￥{{item.conPrice}}</span>
						<span>已抢{{item.totalSales}}件</span>
					</div>
					<div class="share">
						<div class="earn">立即抢购</div>
					</div>
				</li>
				<li v-for='item in sift' v-if="item.spuPlatform == 'yh'" @click="yh(item.id)">
					<img :src="item.mainImageUrl">
					<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
					<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
					<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
					<div class="introduce">{{item.goodsName}}</div>
					<span class="jin"><img src='../assets/jingxaun.png'></span>
					<div class="price">
						<span>￥{{item.price}}</span>/
						<span>降{{item.couponMoney}}元</span>
					</div>
					<div class="rush">
						<span>￥{{item.conPrice}}</span>
						<span>已抢{{item.wlCommissionShare}}件</span>
					</div>
					<div class="share">
						<div class="earn">立即抢购</div>
					</div>
				</li>
				<li v-for='item in sift' v-if="item.spuPlatform == 'jd'" @click="jd(item.id,item.couponMoney)">
					<img :src="item.mainImageUrl">
					<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
					<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
					<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
					<div class="introduce">{{item.goodsName}}</div>
					<span class="jin"><img src='../assets/jingxaun.png'></span>
					<div class="price">
						<span>￥{{item.price}}</span>/
						<span>降{{item.couponMoney}}元</span>
					</div>
					<div class="rush">
						<span>￥{{item.conPrice}}</span>
						<span>已抢{{item.totalSales}}件</span>
					</div>
					<div class="share">
						<div class="earn">立即抢购</div>
					</div>
				</li>

			</ul>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { InfiniteScroll } from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				bannerList: [], //轮播图
				modeList: [], //模块
				len: '',
				advertOne: '', //广告位
				sechandList: [], //广告位
				findGood: [], //发现好货
				actList: [], //热门活动
				sift: [],
				isShow: false,
				loading: '',
				index: 0,
				token: '',
				url: '',
				Loading: true,
				special: [], //整点特卖
				login: '', //判断是否登录
			}
		},
		created() {
			this.token = localStorage.getItem('token');
			this.url = window.location.href;
			this.loginon(); //判断是否登录
			//轮播图
			var bannerUrl = BaseUrl + 'index/banners';
			this.$http.get(bannerUrl).then(res => {
				if(res.data.code == "10000") {
					this.bannerList = res.data.data;
					//			    	console.log(res.data.data);
				} else {
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					})
				}
			}).catch(error => {
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			//八大模块
			//			var modelUrl = BaseUrl + 'index/models?token=' + this.token + '&appId=wap';
			var modelUrl = BaseUrl + 'market/models?token=' + this.token + '&appId=wap' + "&type=index";
			this.$http.get(modelUrl).then(res => {
				if(res.data.code == "10000") {
					//			   	console.log(res.data.data);
					this.modeList = res.data.data;
				} else {
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					})
				}
			}).catch(error => {
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			//整点特卖
			var url = BaseUrl + 'goods/list?goodsType=special&type=jd';
			this.Loading = true;
			this.$http.get(url).then(res => {
				if(res.data.code == '10000') {
					this.Loading = false;
					this.special = res.data.data.list.slice(0, 6);
				}
			}).catch(error => {
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})

			//二手好货
			var sechandUrl = BaseUrl + 'index/advertOnes';
			this.$http.get(sechandUrl).then(res => {
				if(res.data.code == "10000") {
					var len = res.data.data.length;
					this.len = len;
					if(len == 1) {
						this.advertOne = res.data.data[0].img;
					} else {
						this.sechandList = res.data.data
					}
				} else {
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					})
				}
			}).catch(error => {
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			//发现好货
			var findgoodUrl = BaseUrl + 'index/findgood';
			this.$http.get(findgoodUrl).then(res => {
				if(res.data.code == "10000") {
					//			   		console.log(res.data.data);
					this.findGood = res.data.data;
				} else {
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					})
				}
			}).catch(error => {
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			//热门活动商品
			//			var activeUrl = BaseUrl +'index/hoting';
			////			console.log(activeUrl)
			//			this.$http.get(activeUrl).then(res => {
			//			   if(res.data.code == "10000"){
			////			   		console.log(res.data.data);
			//			   		this.actList = res.data.data;
			//			   } 		   
			//			 })

		},

		methods: {
			modelbut: function(obj, value) {
				//				console.log(obj)
				if(obj == "京东") {
					this.$router.push({
						path: '/jd'
					})
				} else if(obj == "邀请VIP") {
					this.$router.push({
						path: '/inviterecord'
					})
				} else if(obj == "整点特卖") {
					this.$router.push({
						path: '/integsale?typename=jd'
					})
				} else if(obj == "天猫") {
					window.location.href = value
				} else if(obj == "娱乐") {
					window.location.href = value
				} else if(obj == "友惠") {
					this.$router.push({
						path: '/yh'
					})
				} else if(obj == "合伙人") {
					Toast({
						message: "请到友惠家APP进行合伙人的申请",
						position: 'middle',
						duration: 3000
					})
				} else if(obj == "每日必推") {
					Toast({
						message: "请到友惠家APP进行推荐",
						position: 'middle',
						duration: 3000
					})
				} else if(obj == "每日签到") {
					if(this.login == 0) {
						window.location.href = value
					} else {
						this.$router.push({
							path: '/enter?url=1'
						})
						localStorage.setItem('url', this.url);
					}

				} else if(obj == "拼多多") {
					this.$router.push({
						path: '/pdd'
					})
				} else if(obj == "淘宝") {
					this.$router.push({
						path: '/taobao'
					})
					localStorage.setItem('tao', '1')
				}
			},
			//特卖
			specialgoods: function() {
				this.$router.push({
					path: '/integsale?typename=jd'
				})
			},
			//整点特卖
			jd: function(id, couponMoney) {
				this.commodity(id, couponMoney); //全局事件
			},
			//轮播
			nav: function(id, value, index, linkType) {
				if(linkType == 'app') {
					this.$router.push({
						path: '/activityPage?type=wap&activityId=' + id
					})
				} else {
					window.location.href = value + '&type=wap' + '&activityId=' + id;
				}
			},
			//发现好货
			find: function(id, value, linkType) {
				if(linkType == 'h5') {
					window.location.href = value
				} else {
					this.$router.push({
						path: '/activityPage?type=wap&activityId=' + id + '&activity=activity'
					})
				}
			},
			//热门活动
			activity: function(id, value) {
				window.location.href = value
			},
			//导航
			navigation: function() {
				this.isShow = !this.isShow;
			},
			//			首页
			home: function() {
				//window.location.href = 
			},
			//我的
			my: function() {
				this.$router.push({
					path: '/personalContent'
				})
			},
			//搜索
			seek: function() {
				this.$router.push({
					path: '/seekgoods'
				})
			},
			//消息
			news: function() {
				this.$router.push({
					path: '/news'
				})
			},
			singInfo(index) {
				this.Loading = true;
				//为你精选
				var siftUrl = BaseUrl + "goods/list";
				//console.log(siftUrl)
				this.$http.get(siftUrl + "?length=10&orderType=couponMoneyDesc&start=" + this.index).then(res => {
					if(res.data.code == "10000") {
						this.Loading = false;
						//				   	console.log(res.data.data.list)
						this.sift = this.sift.concat(res.data.data.list);
						if(res.data.data.isMore == "none") {
							this.loading = true;
							return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
					}

				}).catch(error => {
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			loadMore() {
				this.loading = this.loading;
				if(this.loading == false) {
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 100);
				}
			},
			jd: function(id, couponMoney) {
				this.commodity(id, couponMoney); //全局事件
			},
			yh: function(id) {
				this.yhcommodity(id); //全局事件
			},
			pdd: function(id) {
				this.pddcommodity(id); //全局事件
			},
			loginon() {
				var url = BaseUrl + 'login/in?token=' + this.token + '&appId=wap';
				this.$http.post(url).then(res => {
					if(res.data.code == '10000') {
						this.login = 0;
					} else {
						this.login = 1;
					}
				}).catch(error => {
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.index {
		width: 100%;
		background: #F4F7FA;
	}
	
	.template {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 99;
	}
	
	.template div {
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	
	.aui-title {
		margin-left: 45%!important
	}
	
	.navigation {
		height: 0.6rem;
		float: right;
		margin: 0.2rem 0.25rem 0 0;
	}
	
	.navigation_d {
		width: 1.8rem;
		position: fixed;
		z-index: 9;
		top: 1rem;
		right: 0;
	}
	
	.navigation_d div {
		width: 100%;
		height: 0.8rem;
		text-align: center;
		line-height: 0.8rem;
		background: rgba(0, 0, 0, 0.5);
		margin-bottom: 0.05rem;
		color: #FFFFFF;
	}
	/***轮播图****/
	
	.bannerfig {
		width: 100%;
		height: 4.0rem;
		margin-top: 1rem;
	}
	
	.bannerpic>img {
		width: 100%;
		height: 100%;
	}
	/****标题栏****/
	
	.titlebar {
		padding: 0.2rem;
		background-color: #fff;
	}
	
	.toaltitle {
		font-size: 0.0rem;
	}
	
	.sametitle {
		display: inline-block;
		width: 20%;
	}
	
	.sametitleimg {
		width: 0.7rem;
		height: 0.7rem;
		margin: 0 auto;
	}
	
	.sametitleimg>img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.sametitlename {
		text-align: center;
		font-size: 0.28rem;
		color: #323232;
	}
	/***二手好货广告位****/
	
	.sechandbanner {
		width: 100%;
		height: 2.6rem;
		margin-top: 0.1rem;
	}
	
	.sechandbanner>img {
		width: 100%;
		height: 100%
	}
	/****发现好货****/
	
	.findgood {
		width: 100%;
		height: 0.8rem;
	}
	
	.findgood>img {
		width: 100%;
		height: 100%;
	}
	
	.explosmain {
		font-size: 0.0rem;
	}
	
	.samexplost {
		width: 32.8%;
		height: 3.0rem;
		display: inline-block;
		margin-left: 0.06rem;
		margin-top: 0.06rem;
	}
	
	.samexplost:nth-child(1) {
		margin-left: 0.0rem;
	}
	
	.samexplost:nth-child(4) {
		margin-left: 0.0rem;
	}
	
	.samexplost>img {
		width: 100%;
		height: 100%;
	}
	
	.activemain {
		width: 100%;
		font-size: 0.0rem;
		overflow: hidden;
	}
	
	.sameactive {
		width: 49%;
		height: 2.0rem;
		margin-left: 0.06rem;
		margin-bottom: 0.06rem;
		float: left;
	}
	
	.sameactive>img {
		width: 100%;
		height: 100%;
		float: left;
	}
	
	.sift ul {
		width: 100%;
		overflow: hidden;
	}
	
	.sift li:nth-child(odd) {
		width: 49%;
		float: left;
		list-style: none;
		margin: 0 0.06rem 0.12rem 0;
	}
	
	.sift li:nth-child(even) {
		width: 49%;
		/*height: 6.27rem;*/
		float: left;
		list-style: none;
		margin: 0 0 0.12rem 0.06rem;
	}
	
	.sift ul li>img {
		width: 100%;
		height: 3.69rem;
		display: block;
	}
	
	.introduce {
		padding: 0 0.14rem;
		height: 0.7rem;
		text-indent: 0.7rem;
		color: #333333;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 0.16rem;
	}
	
	.jin {
		position: relative;
		top: -0.8rem;
		left: 0.15rem;
	}
	
	.jin img {
		width: 0.52rem;
		height: 0.28rem;
		display: block;
	}
	
	.price {
		font-size: 0.24rem;
		padding: 0 0.14rem;
		font-family: PingFangSC-Regular;
		margin-top: -0.4rem;
	}
	
	.price span:last-child {
		display: inline-block;
		margin-left: 0.1rem;
		color: #FF2040;
		font-family: PingFangSC-Regular;
	}
	
	.price span:first-child {
		display: inline-block;
		margin-right: 0.1rem;
		color: #333333;
		text-decoration: line-through;
		font-family: PingFangSC-Regular;
	}
	
	.rush {
		padding: 0 0.14rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.rush span:last-child {
		font-size: 0.2rem;
		color: #ABABAB;
		font-family: PingFangSC-Regular;
	}
	
	.rush span:first-child {
		color: #FF2040;
		font-size: 0.3rem;
		font-family: PingFangSC-Regular;
	}
	
	.rush span:first-child h {
		color: #FF2040;
		font-size: 0.2rem;
		font-family: PingFangSC-Regular;
	}
	
	.share {
		width: 100%;
		height: 0.76rem;
		border-top: 1px dashed #CBCBCB;
		margin-top: 0.13rem;
	}
	
	.earn {
		width: 3.4rem;
		height: 0.5rem;
		background: #FF2040;
		border-radius: 0.2rem;
		margin: 0 auto;
		text-align: center;
		line-height: 0.5rem;
		margin-top: 0.13rem;
		font-size: 0.24rem;
		color: #FFFFFF;
		font-family: PingFangSC-Regular;
	}
	
	.jdSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/jd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.7rem;
		float: right;
	}
	
	.yhSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/yh.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.7rem;
		float: right;
	}
	
	.pddSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/pdd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.7rem;
		float: right;
	}
	/*活动标题*/
	
	.activityTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.3rem 0.2rem;
		border-bottom: 1px solid #efefef;
		background: #fff;
		margin-top: 0.1rem;
	}
	
	.activityTitle div:nth-child(1) {
		font-size: 0.3rem;
		color: #ff2040;
	}
	
	.activityTitle div:nth-child(1) img {
		width: 0.36rem;
		height: 0.3rem;
		margin-right: 0.2rem;
		position: relative;
		top: 0.05rem;
	}
	
	.activityTitle div:nth-child(2) {
		font-size: 0.2rem;
		color: #afafaf;
	}
	/*整点特卖*/
	
	.special {
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.specialList {
		width: 33.3%;
		height: 4.1rem;
		border-bottom: 1px solid #efefef;
		border-right: 1px solid #efefef;
		padding: 0.2rem;
		float: left;
		background: #fff;
	}
	
	.specialImg {
		width: 100%;
		height: 2.5rem;
		margin-bottom: 0.2rem;
	}
	
	.specialImg img {
		width: 100%;
		height: 100%;
	}
	
	.specialName {
		height: 0.55rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #3d3d3d;
		font-size: 0.26rem;
		line-height: 1.2;
	}
	
	.specialPrice {
		display: flex;
		justify-content: space-between;
	}
	
	.specialPrice div:nth-child(1) {
		color: #a0a0a0;
		font-size: 0.2rem;
		text-decoration: line-through;
	}
	
	.specialPrice div:nth-child(2) {
		color: #ff2040;
		font-size: 0.28rem;
	}
	
	.examine {
		text-align: center;
		color: #969696;
		font-size: 0.26rem;
		background: #FFF;
		padding: 0.2rem 0;
		margin-bottom: 0.1rem;
	}
</style>